<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) in data" :key="index">
				<a :href="item.url">
					<img :src="item.pic" alt="" />
				</a>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import '@/assets/swiper/swiper.min.css';
	import CONFIG from '@/router/config';
	import axios from 'axios'
	export default {
		data() {
			return {
				data: []
			}
		},
		//		created() {
		//			this.getMsg()
		//		},
		mounted() {
			const ur = CONFIG.domain + '/bilibili?rid=1';
			axios.get(ur).then((res) => {
				//					console.log(res.data.data)
				this.data = res.data.data

			})
		},
		updated() {
			setTimeout(this.swi(), 20)
		},
		methods: {
			swi() {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					autoplay: {
						delay: 1500,
						disableOnInteraction: false
					},
					pagination: {
						el: '.swiper-pagination',
						bulletElement: 'li',
						clickable: true,
						clickableClass: 'my-pagination-clickable',
					},
					observer: true,
					observeParents: true,
				})
			}
		}

	}
</script>

<style lang="scss">
	.swiper-container {
		width: 100%;
		height: 110px;
		.swiper-slide {
			width: 100%;
			img {
				width: 100%;
			}
		}
	}
	
	.swiper-pagination-bullet {
		width: 5px;
		height: 5px;
		background-color: #fff;
		opacity: 1;
	}
	
	.swiper-container-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-custom,
	.swiper-pagination-fraction {
		bottom: 0;
		left: 0;
		width: 100%;
		/*background-color: rgba(0,0,0,.2);*/
	}
	
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 2px;
	}
	
	.swiper-pagination-bullet-active {
		background-color: #de698c;
	}
</style>